import { useEffect, useState } from "react";

export default function NavigationProgress() {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    let timer: Timer;

    function loop() {
      console.log("loop");
      timer = setTimeout(() => {
        setWidth((w) => w + (100 - w) * 0.1);
        loop();
      }, 1000);
    }

    loop();

    return () => {
      clearTimeout(timer);
    };
  }, []);
  return (
    <div
      className="absolute top-0 h-0.5 bg-blue-500 transition-[width] duration-300"
      style={{ width: `${width}%` }}
    ></div>
  );
}
